<template>
    <el-menu
      :default-adctive="this.$router.path"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
  
    <div class="demo">
      <el-button type="success" @click="login">请登录</el-button>
      </div>
    </el-menu>
  
  </template>
  
  <script>
  import { useRouter} from 'vue-router'
  export default {
   
    setup(){
        const router = useRouter()
        function login(){
          router.push('/login') 
        }
       return{
        login,
      }
    }
  }
  </script>
  
  <style scoped>
   .el-menu-demo{
     height: 100px!important;
     padding-left: 300px!important;
     margin-bottom: 50px!important;
  }
   .el-menu-item{
      font-size: 20px!important;
   }
    .demo{
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-right: 30px;
   }
  
  </style>